<template>
  <div class="panelContainer" :style="options.styles">
    <div class="panelHeader flex align-center justify-between" v-if="options.showHeader">
      <h3 class="flex align-center"><i v-if="options.titleObj.icon" :class="['sjcj', options.titleObj.icon]"></i>{{ options.titleObj.name }}</h3>
      <slot name="header"></slot>
    </div>
    <div class="panelBody" :style="{height: options.showHeader ? 'calc(100% - 50px)' : '100%'}">
      <slot></slot>
    </div>
  </div>
</template>
<script setup name="ChartPanel">
import { defineProps } from 'vue'
defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        showHeader: true,
        titleObj: {
          name: '标题',
          icon: ''
        },
        styles: {
          width: '100%',
          height: '100%'
        }
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.panelContainer{
  box-shadow: 0 0 10px #eaeaea;
  border-radius: 10px;
  height:100%;
  .panelHeader{
    height: 50px;
    padding: 0 15px;
    border-bottom: 1px solid #f1f1f1;
    >h3{
      font-size: 18px;
      i{
        margin-right: 10px;
        font-size: 18px;
      }
    }
  }
  .panelBody{
    height: calc(100% - 50px);
  }
}
</style>